import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { cartActions, cartStoreFuns } from '../store/modules/cartStore'
import '../style/cart.scss'
export const day03_02 = function () {
    const cartInfo = useSelector(state => state.cartInfo)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(cartStoreFuns.getMenuList())
    }, [])

    useEffect(() => {
        if (cartInfo.currentMenu) {
            dispatch(cartStoreFuns.getCurrentMenuInfo(cartInfo.currentMenu))
        }
    }, [cartInfo.currentMenu])

    return (
        <>
            <h3>CartCase</h3>

            <div id="cartCase">
                <div className="menu">
                    <div className="sideBar">
                        {cartInfo.menuList.map(menu => {
                            return (
                                <div
                                    key={menu.id}
                                    className={`menuItem ${menu.id == cartInfo.currentMenu && 'currentMenu'} `}
                                    onClick={() => dispatch(cartActions.setCurrentMenu(menu.id))}
                                >
                                    {menu.title}
                                </div>
                            )
                        })}
                    </div>
                    <div className="foodList">
                        {cartInfo.foodList.map(food => {
                            return (
                                <div key={food.id} className="foodItem">
                                    <div className="img"></div>
                                    <div>
                                        {food.title} - ¥{food.price}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
                <div className="count">
                    ¥{cartInfo.totalCount}(配送费¥{cartInfo.deliveryCost})
                </div>
            </div>
        </>
    )
}
